<template>
  <view class="page">
    <view
      style="border-radius: 24rpx; width: 800rpx; background-color: rgba(0, 0, 0, 0.1);  box-shadow: inset 0 0 18rpx #333; padding: 30rpx;">

      <label class="fs-60 fw-800 as-center m-30">
        <text class="color-primary">NMK</text>
        <text class="ml-4">操盘系统</text>
      </label>

      <text class="color-title fs-36 fw-500 lh-3 fw-600">系统登录</text>

      <view :style="{ padding: `30rpx`, borderTop: `2rpx #ececec solid` }">
        <label>
          <uni-icons class="mr-30" type="person-filled" size="24" color="#fff" />
          <uni-easyinput v-model="form.account.value" class="f1 height-66" type="text" placeholder="登录账号" />
        </label>
        <label class="mt-44">
          <uni-icons class="mr-30" type="locked-filled" size="24" color="#fff" />
          <uni-easyinput @confirm="login" v-model="form.password.value" class="f1 height-66" type="password"
            placeholder="登录密码" />
        </label>

        <!-- <text @click="uniNavigator({ url: `/pages/auth/reset` })" :style="{
          cursor: `pointer`,
          textDecoration: `underline`,
        }" class="as-end mt-30 color-inverse fs-24">
          忘记密码？
        </text> -->
        <button class="bgc-btn mt-60 lh-66 fs-32 ml-0 mr-0 color-inverse" hover-class="tap-hover" @click="login">
          登录
        </button>

        <!-- <text @click="uniNavigator({ url: `/pages/auth/register` })" :style="{
          cursor: `pointer`,
          textDecoration: `underline`,
        }" class="as-center mt-90 color-inverse fs-24">
          如无账号，请先注册...
        </text> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { uniNavigator } from "@/common/libs/utils";
import { useStore } from "vuex";

const { PAGE_ADMIN_HOME, STORAGE_KEY_USER_INFO } = getApp().globalData!.$config;

const form = reactive({
  account: {
    placeholder: "请输入账号",
    value: ""
  },
  password: {
    placeholder: "请输入密码",
    value: ""
  }
});
const store = useStore();

function login() {
  let key: keyof typeof form;
  for (key in form) {
    if (!form[key].value) {
      uni.showToast({ title: form[key].placeholder, icon: "none" });
      return;
    }
  }
  uni.showToast({ title: "logging", icon: "loading" });
  uni.request({
    url: "/open/login",
    method: "POST",
    data: { userName: form.account.value, password: form.password.value },
    success: ({ data }) => {
      uni.hideToast();
      uni.setStorage({
        key: STORAGE_KEY_USER_INFO, data,
        success() {
          store.commit("setState", { key: "userInfo", value: data });
          uniNavigator({ type: "reLaunch", url: PAGE_ADMIN_HOME });
        },
      });
    }
  })
}
</script>

<style lang="scss">
// scss
page {
  height: 100%;
}

.page {
  // #ifdef APP-PLUS
  height: 100vh;
  // #endif
  // #ifndef APP-PLUS
  height: 100%;
  // #endif

  justify-content: center;
  align-items: center;
}
</style>